<template>

  <!-- Form -->

  <el-dialog title="添加房产" :visible="showDialog" @click="closeFn">
    <el-row type="flex" justify="start" class="manager">
      <h2>经纪</h2>
      <el-select v-model="value" clearable placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-row>
    <el-row type="flex" justify="start" class="manager">
      <h2>分类</h2>
      <el-select v-model="value" clearable placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-row>
    <el-row type="flex" justify="start" class="manager">
      <h2>标题</h2>
      <el-input v-model="value" clearable placeholder="请选择" />
    </el-row>
    <el-row type="flex" justify="start" class="manager">
      <h2>标签</h2>
      <el-input v-model="value" clearable placeholder="请选择" />
    </el-row>
    <el-row type="flex" justify="start" class="manager">
      <h2>地址</h2>
      <el-input v-model="value" clearable placeholder="请选择" />
    </el-row>
    <el-row type="flex" justify="start" class="manager">
      <h2>价格</h2>
      <el-input v-model="value" clearable placeholder="请选择" />
    </el-row>
    <el-row type="flex" justify="start" class="manager">
      <h2>描述</h2>
      <el-input
        v-model="textarea"
        type="textarea"
        :rows="2"
        placeholder="请输入内容"
      />
    </el-row>
    <el-row><h2>内容</h2></el-row>
    <el-row id="pic" type="flex" justify="start" class="manager">
      <h2>介绍照片</h2>
      <el-upload
        class="avatar-uploader"
        action="https://jsonplaceholder.typicode.com/posts/"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
      >
        <img v-if="imageUrl" :src="imageUrl" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon" />
      </el-upload>
    </el-row>
    <el-row id="cover" type="flex" justify="start" class="manager">
      <h2>封面</h2>
      <el-upload
        id="firstPage"
        class="avatar-uploader"
        action="https://jsonplaceholder.typicode.com/posts/"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
      >
        <img v-if="imageUrl" :src="imageUrl" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon" />
      </el-upload>
    </el-row>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeFn">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>

</template>

<script>
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false
    }
  },

  methods: {
    closeFn() {
      this.$emit('update:showDialog', false)
    },
    submit() {
      this.closeFn()
    }
  }
}
</script>

<style lang="scss" scoped>
#cover{
  margin-top: 50px;
}
.manager{
  align-items: center;
  >h2{
    margin-right: 15px;
  }
}
.dialog-footer{
  display: flex;
  justify-content: flex-end;
}
#firstPage{
  margin-left: 42px;

}
::v-deep.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
